import cn from 'classnames';
import React from 'react';
import s from './style.module.css';
import Table from '@knownsec/react-component/dist/Table';
import Button from '@kuiper-components/button';
import Dialog from '@kuiper-components/dialog';
import Progress from '@knownsec/react-component/dist/Progress';

import PropTypes from 'prop-types';

function CheckAlert({ data, type, changeShow }) {
	const columns = {
		a: [
			{
				title: '监测项',
				dataIndex: 'a',
				key: 'a',
			},
			{
				title: '监测开始时间',
				dataIndex: 'b',
			},
			{
				title: '检测进度',
				dataIndex: 'c',
				render(e) {
					return <Progress percent={e} />;
				},
			},
			{
				title: '下次监测时间',
				dataIndex: 'd',
			},
		],
		b: [
			{
				title: '监测项',
				dataIndex: 'a',
				key: 'a',
			},
			{
				title: '监测开始时间',
				dataIndex: 'b',
			},
			{
				title: '检测进度',
				dataIndex: 'c',
				render(e) {
					return <Progress percent={e} />;
				},
			},
		],
	};

	return (
		<Dialog
			title={'查看详情'}
			visible={data}
			confirmText=""
			cancelText=""
			className={s.w600}
			onClose={() => {
				changeShow(false);
			}}
		>
			<div className={cn(s.dioBtn)}>
				<p className={s.title}>检测进度</p>
				<div className={s.tableBox}>
					<Table columns={columns.b} data={data}></Table>
				</div>
				<div className={s.btnBox}>
					<Button
						onClick={() => {
							changeShow(false);
						}}
					>
						关闭
					</Button>
				</div>
			</div>
		</Dialog>
	);
}
CheckAlert.propTypes = {
	data: PropTypes.any,
	type: PropTypes.string,
	changeShow: PropTypes.any,
};
export default CheckAlert;
